<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>MMLOO</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 引入 Bootstrap -->
	<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
	<script src="../../resources/js/jquery-1.8.2.min.js"></script>

	<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
	<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript">


		    function refreshImage() {
			     document.getElementById("captchaImage").setAttribute("src",
					"${pageContext.request.contextPath}/Kaptcha.jpg?" + Math.round(Math.random() * 10000));
		    }
	</script>
</head>
<body>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<div class="carousel slide" id="carousel-269639">
				<ol class="carousel-indicators">
					<li data-slide-to="0" data-target="#carousel-269639">
					</li>
					<li data-slide-to="1" data-target="#carousel-269639" class="active">
					</li>
					<li data-slide-to="2" data-target="#carousel-269639">
					</li>
				</ol>
				<div class="carousel-inner">
					<div class="item">
						<img alt="" src="../../img/1.jpg" />
						<div class="carousel-caption">
							<h4>
								棒球
							</h4>
							<p>
								棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。
							</p>
						</div>
					</div>
					<div class="item active">
						<img alt="" src="../../img/2.jpg" />
						<div class="carousel-caption">
							<h4>
								冲浪
							</h4>
							<p>
								冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
							</p>
						</div>
					</div>
					<div class="item">
						<img alt="" src="../../img/3.jpg" />
						<div class="carousel-caption">
							<h4>
								自行车
							</h4>
							<p>
								以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
							</p>
						</div>
					</div>
				</div> <a data-slide="prev" href="#carousel-269639" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel-269639" class="right carousel-control">›</a>
			</div>
			<c:if test="${message!=null}">
				<div class="alert alert-danger" role="alert">${message}</div>
			</c:if>
			<div class="btn-group pull-right" style="margin-top:8px;margin-right:580px;">
				<button
						class="btn btn-lg btn-block btn-success"
						data-toggle="modal" data-target="#login">登录
				</button>
			</div>

		</div>
	</div>


</div>
<div class="modal fade" id="login" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
					<span class="sr-only">Close</span>
				</button>
				<h3 class="modal-title">登录</h3>
			</div>
			<div class="modal-body">
				<form action="/manage/login" method="POST">
					<div class="form-group">
						<label class="control-label" for="edit_username">用户名</label>
						<input type="text" class="form-control" id="edit_username" name="username"
							   required>
					</div>
					<div class="form-group">
						<label for="edit_password">密码</label>
						<input type="password" class="form-control" id="edit_password" name="password" required/>
					</div>
					<div class="form-group">
						<div style="float: left;">
							<input type="text" name="code" class="form-control" placeholder="验证码" required>

						</div>
						<div style="float: right; margin-right: 420px;">
							<img src="${pageContext.request.contextPath}/Kaptcha.jpg" id="captchaImage" onclick="javascript:refreshImage()" />
						</div>
					</div>
					<button class="btn btn-primary btn-lg btn-block btn-success" type="submit">
						登录
					</button>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="../../resources/plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
